<template>
  <ul>
    <li 
    v-for="(item,index) in list"
    :key='index'
    >
    <router-link
    :to="item.routeTo" replace
    >{{item.text}}</router-link></li>
  </ul>
</template>
<script>
export default {
  name: '',
  compoments:{

  },
  props:['list'],
  data () {
    return {
      
      }
  }
}
</script>
<style lang='scss' scoped>
@import '../sass/mixin.scss';
ul{
  @include flex($jc:space-around,$ai:stretch);
  height: 80px;
  width:100%;
  li{
    display: inline-block;
    // padding:20px 0;
    font-size:28px; /*px*/
    box-sizing: border-box;
    position: relative;
    text-align: center;
    a{
    color:#666;
        line-height: 80px;
    }
      a{
    &.router-link-active{
      color:#fb4700;
        &:after{
        content:' ';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #fb4700;
        border-radius: 2px; /*no*/
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }}
  }
}
</style>